<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/OrderModule/OrderItemView.css"/>
    <title>课程详情查看</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color: #F1F1F1;
        }
        table{
            text-align:center;
            margin:10px auto;
            width:700px;
        }
        .sty {
            width:146px;
            height:30px;

        }
        tr{
            border-bottom: 15px solid #F1F1F1;
        }

        textarea{
            resize: none;
        }
        video{
            height: 240px;
        }
    </style>
</head>
<body>
<!-- 李亚峰 -->
<div>
    <table>
        <tr style='background-color:#F1F1F1;height:35px;'>
            <th colspan="7">课程详情</th>
        </tr>
        <tr style='text-align:center;'>
            <td>课程名称：</td>
            <td>
                <input readonly="readonly" class="sty" type="text"  name="courseName">
            </td>
            <td style='width:130px;height:30px;background-color:#F1F1F1;'>课程时常：</td>
            <td>
                <input readonly="readonly" class="sty" type="text" name="courseTime">
            </td>
            <td style='width:130px;height:30px;background-color:#F1F1F1;'>课程售价：</td>
            <td>
                <input readonly="readonly" class="sty" type="text" name="courseNprice" >
            </td>
        </tr>
        <tr style='text-align:center;'>
            <td style='width:130px;height:30px;background-color:#F1F1F1;'>课程讲师：</td>
            <td>
                <input readonly="readonly" class="sty" type="text" name="userName"  >
            </td>
            <td style='width:130px;height:30px;background-color:#F1F1F1;'>课程状态：</td>
            <td>
                <input readonly="readonly" class="sty" type="text" name="courseStatus" >
            </td>
            <td style='width:130px;height:30px;background-color:#F1F1F1;'>课程销量：</td>
            <td>
                <input readonly="readonly" class="sty" type="text" name="saleNum" >
            </td>
        </tr>
        <tr style='text-align:center;'>
            <td style='width:130px;height:60px;background-color:#F1F1F1;'>课程简介：</td>
            <td colspan="5">
                <textarea style="resize:none; width: 100%; height: 100%" readonly="readonly" cols="123" id="courseIntro" rows="4">在这里输入内容...</textarea>
            </td>
        </tr>
        <tr style='text-align:center;'>
            <td style='width:150px;height:150px;background-color:#F1F1F1;'>视频预览：</td>
            <td colspan="5" id="mainImage">
                <video id="uploadVideo" src="" controls="controls" autoplay="autoplay" style="width: 100%;" >
                    <source src="movie.mp4" type="video/mp4">
                    <source src="movie.ogg" type="video/ogg">
                    <source src="movie.webm" type="video/webm">
                </video>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var form;
    var $;
    var table;
    var layer;
    layui.use(['form','jquery','table','layer'],function() {
        form = layui.form;
        $ = layui.$;
        table = layui.table;
        layer = layui.layer;
    });
    var user = JSON.parse(localStorage.getItem('user'));

    $.ajax({
        url:'/CourseOrder/getCourse',
        dataType:'json',
        data:{"id":$('#proId',window.parent.document).val()},
        success:function (data) {
            data = data.data;
            console.log(data);
            $('input[name = courseName]').val(data.courseName);
            $('input[name = courseTime]').val(data.courseTime);
            $('input[name = courseNprice]').val("￥"+data.courseNprice);
            $('input[name = userName]').val(data.userName);
            if(data.courseStatus == 0){
                data.courseStatus = "已删除";
            }else if(data.courseStatus == 1){
                data.courseStatus = "上架";
            }else{
                data.courseStatus = "下架";
            }
            $('input[name = courseStatus]').val(data.courseStatus);
            $('input[name = saleNum]').val(data.saleNum);
            $('#courseIntro').val(data.courseIntro);
            $('#uploadVideo').attr("src",data.courseUrl);
        }
    });
</script>
</html>